HTML 자세히 보기 CSS 자세히 보기 JAVASCRIPT 자세히 보기 광고 준비 중 jQuery | GSAP10 [제이쿼리] 스타일 관련 메서드 2022. 9. 5. [제이쿼리] 속성 관련 메서드 2022. 9. 5. [제이쿼리] 클래스 관련 메서드 2022. 9. 5. jQuery 탐색 선택자 🦀 jQuery 선택자 탐색 선택자 종류 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택합니다. nextUntil() $("div.m").nextUntil(".. 2022. 9. 1. jQuery 필터 선택자 jQuery 선택자 필터 선택자 종류 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 번째 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. :lt() $("li:lt(2)") index가 2보다 작은 li 요소들을 선택합니다. :no.. 2022. 9. 1. jQuery 속성 선택자 jQuery 선택자 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc'앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않습니다. 요소[속성*='값'] $("span[class*='.. 2022. 8. 30. jQuery 기본 선택자 jQuery 선택자 jQuery 선택자 (selector) 는 이 책의 CSS3 파트에서 학습한 CSS 선택자와 의미가 같은것이 많이 있습니다. jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 미접한 관계가 있습니다. 이런 이유 때문에 앞으로 학습할 주제별 실습에서도 CSS를 포함한 예제로 구성하였습니다. jQuery 선택자의 형식은 다음과 같습니다. $("선택자") $("#gnb") 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb>ul>li") #gnb의 자식 요소의 자식 요소 li를 선택합니.. 2022. 8. 30. jQuery 소개 jQuery 연결 방법 jQuery를 사용하기 위해서는 jQuery 라이브러리를 웹페이지에 연결해서 사용해야 합니다. jQuery 라이브러리를 연결하는 방식에는 파일을 직접 다운로드받아 연결하는 방식과 CDN(Content Delivery Network)방식이 있습니다. 현재 1.x, 2.x, 3.x 버전을 지원해 주고 있으며 각 버전별로 브라우저 지원이나 기존 메서드들의 지원 여부 등의 차이가 있습니다. Download 방식 1. https://jquery.com/download에 접속하여 "Download the compressed, production jQuery 3.6.1"을 다운로드 합니다. 2. html 문서를 jQuery 라이브러리와 같은 경로에 저장합니다. 라이브러리가 잘 연결되었는지 확인.. 2022. 8. 30. jQuery 개념 소개 write less, do more. HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 JavaScript 라이브러리이다. 존 레식(John Resig)에 의해 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개되었다. JavaScript의 지속적인 개선으로 대부분은 바닐라 JavaScript로 구현할 수 있게 되었고, Virtual DOM을 이용하는 React와 같은 좋은 대안들의 등장 등의 이유로 현재는 출시 초기의 위상에 비하면 입지가 많이 낮아진 상태이다. jQuery는 다음과 같은 기능을 갖고 있다. DOM 엘리먼트 선택 DOM 트래버설 및 수정(CSS 1-3 지원. 기본적인 XPath를 플러그인 형태로 지원) 이벤트 CSS 조작 특수효과.. 2022. 8. 30. GSAP 자바스크립트 애니메이션 라이브러리 GSAP The GreenSock Animation Platform GSAP은 자바스크립트 애니메이션의 Swiss Army Knife라고 생각하면 됩니다. 하지만 더 좋습니다. JavaScript가 만질 수 있는 모든 것(CSS 속성, 캔버스 라이브러리 개체, SVG, React, Vue, Angular, 일반 개체 등)에 애니메이션을 적용하고 자동 GPU를 포함하여 놀라운 속도로(jQuery보다 최대 20배 빠름) 수많은 브라우저 불일치를 해결합니다. 간단히 말해서, GSAP는 지구상에서 가장 강력한 고성능 JavaScript 애니메이션 라이브러리입니다. 이것이 아마도 Google이 JS 기반 애니메이션에 권장하고 모든 주요 광고 네트워크에서 파일 크기 계산에서 제외하는 이유일 것입니다. 앱을 구성하는.. 2022. 8. 29. 이전 1 다음 728x90 반응형
